<template>
	<router-link to="/home/goodsinfo" class="goodlists" tag="div">
		<!--<div class="goodinfo" v-for="item in goodslist" :key="item.id" @click="goDetail(item.id)">-->
			<!--<img :src="item.img_url" alt="">-->
			<!--<h1 class="title">{{ item.title }}</h1>-->
			<!--<div class="info">-->
				<!--<p class="price">-->
					<!--<span class="now">￥{{ item.sell_price }}</span>-->
					<!--<span class="old">￥{{ item.market_price }}</span>-->
				<!--</p>-->
				<!--<p class="sell">-->
					<!--<span>热卖中</span>-->
					<!--<span>剩{{ item.stock_quantity }}件</span>-->
				<!--</p>-->
			<!--</div>-->
		<!--</div>-->


		<!--<mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>-->
		<div class="goodinfo">
			<div class="photo">
				<img src="https://img12.360buyimg.com/mobilecms/s300x300_jfs/t1/83339/38/5190/258994/5d36d3e1Ec7e4d346/162260494af437e8.jpg!q70.jpg" alt=""/>
				<h4>6.39英寸水滴屏幕，顺畅游戏视野。麒麟810处理器</h4>
			</div>
			<div class="info">
				<p class="price">
					<span class="new">￥1099</span>
					<span class="old">￥2109</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余60件</span>
				</p>
			</div>
		</div>
		<div class="goodinfo">
			<div class="photo">
				<img src="https://img12.360buyimg.com/n1/jfs/t1/62099/27/5390/517863/5d392dc8Efc3aa98d/8a13d963c617eb59.jpg" alt=""/>
				<h4>RedmiBook 14英寸全金属超轻薄 酷睿i7 游戏本</h4>
			</div>
			<div class="info">
				<p class="price">
					<span class="new">￥4899</span>
					<span class="old">￥7999</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余32件</span>
				</p>
			</div>
		</div>
		<div class="goodinfo">
			<div class="photo">
				<img src="https://img14.360buyimg.com/n1/s350x449_jfs/t1/67837/13/5276/931342/5d37e549E4c634963/fd74f83cf2343ce4.png!cc_350x449.jpg" alt="" height="190"/>
				<h4>连衣裙 夏季女装 雪纺裙超仙收腰A字长裙 </h4>
			</div>
			<div class="info">
				<p class="price">
					<span class="new">￥208</span>
					<span class="old">￥288</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余88件</span>
				</p>
			</div>
		</div>
		<div class="goodinfo">
			<div class="photo">
				<img src="https://img11.360buyimg.com/n1/s350x449_jfs/t1/48708/28/6312/226658/5d3e469aEb87ea134/9116b7aed24011e3.jpg!cc_350x449.jpg" alt="" height="190"/>
				<h4>衬衫显瘦 夏季新款 免烫抗皱 休闲职业女装</h4>
			</div>
			<div class="info">
				<p class="price">
					<span class="new">￥108</span>
					<span class="old">￥188</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余28件</span>
				</p>
			</div>
		</div>
		<div class="goodinfo">
			<div class="photo">
				<img src="https://img14.360buyimg.com/n1/s450x450_jfs/t29029/243/1585475829/166534/b8ade6be/5ce4f904Ne8bf9f75.jpg" alt="" height="180"/>
				<h4>RedmiBook 14英寸全金属超轻薄 酷睿i7 游戏本</h4>
			</div>
			<div class="info">
				<p class="price">
					<span class="new">￥4899</span>
					<span class="old">￥7999</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余32件</span>
				</p>
			</div>
		</div>
		<div class="goodinfo">
			<div class="photo">
				<img src="https://img10.360buyimg.com/n1/jfs/t26275/187/1549873613/326035/26996481/5be66aafN9cc8ae5d.jpg" alt=""/>
				<h4>小米电视4C 40英寸 人工智能网络液晶平板电视</h4>
			</div>
			<div class="info">
				<p class="price">
					<span class="new">￥1899</span>
					<span class="old">￥3099</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余88件</span>
				</p>
			</div>
		</div>
		<div class="goodinfo">
			<div class="photo">
				<img src="https://img12.360buyimg.com/cms/jfs/t27472/175/1282647478/323452/1623aa04/5bc58df1N68e85cc1.jpg" alt="" height="190"/>
				<h4>北欧简约双人床 高箱储物床 布艺雅致 1.8*2.0米</h4>
			</div>
			<div class="info">
				<p class="price">
					<span class="new">￥1099</span>
					<span class="old">￥2109</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余60件</span>
				</p>
			</div>
		</div>
		<div class="goodinfo">
			<div class="photo">
				<img src="https://img13.360buyimg.com/n1/s450x450_jfs/t1/42287/25/12242/166690/5d5a712eE91ea1400/c9904f1bb2c8d19d.jpg" alt=""/>
				<h4> 小米CC9e 3200万美颜自拍 屏幕指纹 白色恋人 游戏智能拍照手机</h4>
			</div>
			<div class="info">
				<p class="price">
					<span class="new">￥2888</span>
					<span class="old">￥3688</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余32件</span>
				</p>
			</div>
		</div>
		<div class="goodinfo">
			<div class="photo">
				<img src="https://img10.360buyimg.com/n1/s350x449_jfs/t1/43312/37/12050/66415/5d550889Ecd1b1d38/2b752977e2c39e41.jpg!cc_350x449.jpg" alt="" height="190"/>
				<h4>KRISBORG韩版西服外套 新品简约男士宽松版廓形落肩外套 2色可选</h4>
			</div>
			<div class="info">
				<p class="price">
					<span class="new">￥208</span>
					<span class="old">￥288</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余88件</span>
				</p>
			</div>
		</div>
		<div class="goodinfo">
			<div class="photo">
				<img src="https://img14.360buyimg.com/n1/s450x450_jfs/t1/49752/36/7321/82300/5d4ce47fEc8a6835a/633245d4aa900e6f.jpg" alt="" height="190"/>
				<h4>韩国进口 透明质酸水乳套装 水100ml+乳100ml+水30ml+乳30ml 保湿滋润</h4>
			</div>
			<div class="info">
				<p class="price">
					<span class="new">￥108</span>
					<span class="old">￥188</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余28件</span>
				</p>
			</div>
		</div>
		<div class="goodinfo">
			<div class="photo">
				<img src="https://img14.360buyimg.com/n1/jfs/t21346/348/552463252/104650/ef84a7d4/5b114e25N193c85aa.jpg" alt=""/>
				<h4>浪琴(Longines)瑞士手表 瑰丽系列机械男表L4.921.2.11.2</h4>
			</div>
			<div class="info">
				<p class="price">
					<span class="new">￥8999</span>
					<span class="old">￥10999</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余18件</span>
				</p>
			</div>
		</div>
		<div class="goodinfo">
			<div class="photo">
				<img src="https://img14.360buyimg.com/n1/s350x449_jfs/t1/83763/1/7770/225773/5d5c9f29E6333140b/724a1a2b47d05bf5.jpg!cc_350x449.jpg" alt=""/>
				<h4>秋冬女装新品浅蓝格中长款双面呢毛呢大衣外套配腰带 浅蓝格 S</h4>
			</div>
			<div class="info">
				<p class="price">
					<span class="new">￥1899</span>
					<span class="old">￥3099</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余88件</span>
				</p>
			</div>
		</div>
		<div class="goodinfo">
			<div class="photo">
				<img src="https://img14.360buyimg.com/n1/jfs/t1/55313/27/8331/154495/5d5b537dEce4d62c3/cfb70d023a3368be.jpg" alt=""/>
				<h4>欧采妮 紫水晶钻石吊坠 18K金镶嵌12克拉紫水晶伴钻项链 女款</h4>
			</div>
			<div class="info">
				<p class="price">
					<span class="new">￥7600</span>
					<span class="old">￥8888</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余60件</span>
				</p>
			</div>
		</div>
		<div class="goodinfo">
			<div class="photo">
				<img src="https://img11.360buyimg.com/n1/s450x450_jfs/t2656/295/34058120/362134/d92995e5/56fc835dNe349b797.jpg" alt=""/>
				<h4>佳能 单反套机2420万有效像素 45点十字对焦 WIFI/NFC</h4>
			</div>
			<div class="info">
				<p class="price">
					<span class="new">￥4899</span>
					<span class="old">￥7999</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余32件</span>
				</p>
			</div>
		</div>
		<div class="goodinfo">
			<div class="photo">
				<img src="https://img14.360buyimg.com/n1/s350x449_jfs/t1/67837/13/5276/931342/5d37e549E4c634963/fd74f83cf2343ce4.png!cc_350x449.jpg" alt="" height="190"/>
				<h4>连衣裙 夏季女装 雪纺裙超仙收腰A字长裙 </h4>
			</div>
			<div class="info">
				<p class="price">
					<span class="new">￥208</span>
					<span class="old">￥288</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余88件</span>
				</p>
			</div>
		</div>
		<div class="goodinfo">
			<div class="photo">
				<img src="https://img11.360buyimg.com/n1/s350x449_jfs/t1/48708/28/6312/226658/5d3e469aEb87ea134/9116b7aed24011e3.jpg!cc_350x449.jpg" alt="" height="190"/>
				<h4>衬衫显瘦 夏季新款 免烫抗皱 休闲职业女装</h4>
			</div>
			<div class="info">
				<p class="price">
					<span class="new">￥108</span>
					<span class="old">￥188</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余28件</span>
				</p>
			</div>
		</div>
		<div class="goodinfo">
			<div class="photo">
				<img src="https://img12.360buyimg.com/n1/jfs/t1/62099/27/5390/517863/5d392dc8Efc3aa98d/8a13d963c617eb59.jpg" alt="" height="180"/>
				<h4>RedmiBook 14英寸全金属超轻薄 酷睿i7 游戏本</h4>
			</div>
			<div class="info">
				<p class="price">
					<span class="new">￥4899</span>
					<span class="old">￥7999</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余32件</span>
				</p>
			</div>
		</div>
		<div class="goodinfo">
			<div class="photo">
				<img src="https://img10.360buyimg.com/n1/jfs/t26275/187/1549873613/326035/26996481/5be66aafN9cc8ae5d.jpg" alt=""/>
				<h4>小米电视4C 40英寸 人工智能网络液晶平板电视</h4>
			</div>
			<div class="info">
				<p class="price">
					<span class="new">￥1899</span>
					<span class="old">￥3099</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余88件</span>
				</p>
			</div>
		</div>
		<mt-button type="danger" size="large">加载更多</mt-button>
	</router-link>
</template>

<script>
//	export default {
//		data() {
//		// data 是往自己组件内部，挂载一些私有数据的
//		return {
//			pageindex: 1, // 分页的页数
//			goodslist: [] // 存放商品列表的数组
//		};
//	},
//	created() {
//		this.getGoodsList();
//	},
//	methods: {
//		getGoodsList() {
//			// 获取商品列表
//			this.$http
//					.get("api/getgoods?pageindex=" + this.pageindex)
//					.then(result => {
//				if (result.body.status === 0) {
//					// this.goodslist = result.body.message;
//					this.goodslist = this.goodslist.concat(result.body.message);
//				}
//			});
//		},
//		getMore() {
//			this.pageindex++;
//			this.getGoodsList();
//		},
//		goDetail(id) {
//			// 使用JS的形式进行路由导航
//
//			// 注意： 一定要区分 this.$route 和 this.$router 这两个对象，
//			// 其中： this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它
//			// 其中： this.$router 是一个路由【导航对象】，用它 可以方便的 使用 JS 代码，实现路由的 前进、后退、 跳转到新的 URL 地址
//
//			console.log(this);
//			// 1. 最简单的
//			// this.$router.push("/home/goodsinfo/" + id);
//			// 2. 传递对象
//			// this.$router.push({ path: "/home/goodsinfo/" + id });
//			// 3. 传递命名的路由
//			this.$router.push({ name: "goodsinfo", params: { id } });
//		}
//	}
//	};
</script>

<style lang="scss" scoped>
.goodlists{
	padding: 7px 7px 60px 7px;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	.goodinfo{
		border: 1px solid #dddddd;
		width: 49%;
		padding: 2px;
		min-height:308px;
		flex-direction:column;
		display: flex;
		justify-content:space-between;
		box-shadow: 0 0 7px #999;
		margin-bottom: 10px;
		.photo{
			flex-direction:column;
			display: flex;
			justify-content:space-between;
		}
		img{
			width: 100%;
		}
        .info{
	        background-color: #dddddd;
	        position:relative;
	        .new{
		        font-weight: bold;
		        color: red;
		        font-size: 18px;
		        margin-right: 10px;

	        }
            .old{
	            text-decoration: line-through;
	            font-size: 14px;

            }
            .sell{
				display: flex;
	            justify-content: space-between;
            }
        }
	}
}
</style>